<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!doctype html>
<html ng-app="Demo" ng-controller="DemoController">
<head>
    <meta charset="utf-8" />

    <title>
        Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS
      
        	别忘了取消超时计时器在美元AngularJS破坏事件
    </title>
</head>
<body>

    <h1>
        Don't Forget To Cancel $timeout Timers In Your $destroy Events In AngularJS
   		别忘了取消超时计时器在AngularJS破坏事件
    </h1>

    <p>
        <a href="#" ng-click="toggle()">Toggle Section</a>
    </p>

    <div ng-switch="section">

        <p ng-switch-when="happy" bn-directive>
            Oh sweet!
        </p>

        <p ng-switch-when="sad" bn-directive>
            Oh noes!
        </p>

    </div>


    <!-- Load jQuery and AngularJS. -->
    <script src="jQuery/jQuery-2.1.4.min.js"></script>
    <script src="../AngularJS/angular-1.5.0/angular.min.js"></script>

    <script type="text/javascript">
                 //为我们的demo创建一个应用模块
        var app = angular.module( "Demo", [] );
        // 定义控制器
        app.controller("DemoController",function( $scope ) {
                $scope.section = "happy";
                //在toggle函数中改变section的值，以此在标记中显示/隐藏不同的部分
                $scope.toggle = function() {
                    if ( $scope.section === "happy" ) {
                        $scope.section = "sad";
                    } else {
                        $scope.section = "happy";
                    }
                };
            }
        );


        // -------------------------------------------------- //
        // -------------------------------------------------- //



        //定义指令
        app.directive("bnDirective", function( $timeout ) {
                return({
                    link: function ( $scope, element, attributes ) {
                    	console.log("link")
                    //当timeout被定义时，它返回一个promise对象
                   //$timeout: 定时器，link加载完后执行
                   var timer = $timeout(function() {
                    		console.log("$timeout")
                            console.log( "Timeout executed", Date.now() );
                       },
                       2000
                    );
                    console.log(22)
                    console.log(JSON.stringify(timer))
                    //将resolve/reject处理函数绑定到timer promise上以确保我们的cancel方法能正常运行
                    timer.then(
                        function() {
                        	console.log(JSON.stringify(timer))
                            console.log( "Timer resolved!", Date.now() );
                        },
                        function() {
                            console.log( "Timer rejected!", Date.now() );
                        }
                    );
                    //当DOM元素从页面中被移除时，AngularJS将会在scope中触发$destory事件。这让我们可以有机会来cancel任何潜在的定时器
                    $scope.$on( "$destroy",function( event ) {
                            $timeout.cancel( timer );
                        }
                    );

                },
                scope: false,
                controller:function($scope){
                	console.log("controller")
                }
                
                
                
                });

            }
        );


    </script>

</body>
</html>   
	</body>
</html>
